<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<script type="text/javascript">
		cola(function (model) {
			model.dataType({
				name: "Employee",
				properties: {
					name: {
						caption: "姓名",
						validators: ["required"]
					},
					age: {
						caption: "年龄",
						dataType: "int",
						validators: [{
							$type: "number",
							min: 16,
							max: 80
						}]
					},
					gender: {
						caption: "性别"
					},
					email: {
						caption: "电邮",
						validators: ["email", function(value) {
							if (value && value.toLowerCase().indexOf("qq.com") > 0) {
								return "不能使用qq邮箱！";
							}
						}]
					},
					province: {
						caption: "省"
					},
					city: {
						caption: "市"
					},
					district: {
						caption: "区"
					},
					comment: {
						caption: "备注"
					}
				}
			});
			model.describe("employee", "Employee");

			model.set("employee", {});

			model.action({
				submit: function () {
					model.get("employee").validate();
				}
			});
		});
	</script>
</head>
<body style="padding:2em;">
	<c-form bind="employee">
		<fields class="cols-2">
			<field property="name"></field>
			<field property="age"></field>
		</fields>
		<fields class="cols-2">
			<field property="gender">
				<label></label>
				<c-select-button items="0=男;1=女" c-bind="gender"></c-select-button>
			</field>
			<field property="email"></field>
		</fields>
		<fields class="cols-3">
			<field property="province"></field>
			<field property="city"></field>
			<field property="district"></field>
		</fields>
		<field property="comment">
			<label></label>
			<c-textarea rows="5"></c-textarea>
		</field>
		<field>
			<label></label>
			<c-checkbox bind="agree" label="我已阅读并以同意以上条款"></c-checkbox>
		</field>
		<field>
			<label></label>
			<messages></messages>
		</field>
		<field>
			<label></label>
			<c-button class="red" c-onclick="submit()">提交</c-button>
		</field>
	</c-form>
</body>
</html>